<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="包车"></c-nav-bar>
		<!-- <image class="bg" src="https://i.ringzle.com/file/20231128/f0c66f99994d45ba8f40b3350488662b.png"></image> -->
		<view class="lb bg">
			<u-swiper :list="lbList" autoplay circular height="240rpx"></u-swiper>
		</view>
		<block v-if="list.length>0">
			<view v-for="(car,index) in list" :key="index" class="car_item" @tap="toTurn(car)">
			<image :src="car.pic"></image>
			<view class="bc_info">
				<view class="bci_top">
					<view class="bcit_name">{{car.name}}</view>
				</view>
				<view class="bci_pzs">
					<view>{{car.carPower}}</view>
					<view>{{categaryCfg[car.categary]}}</view>
					<view>{{driversTypeCfg[car.driversType]}}</view>
					<view>{{car.seat}}座</view>
				</view>
				<view class="bci_price">
					<text>￥{{car.price}}</text>
					<span>/天</span>
				</view>
				<view class="bci_tips">
					<image v-if="car.insureType==0" src="https://i.ringzle.com/file/20231128/44923c2a524846c2b37bcc02dac55d38.png"></image>
					<view class="bcit_box" v-if="car.takeDeliverType===0">上门取送</view>
					<view class="bcit_box" v-if="car.depositType>=0">{{depositTypeCfg[car.depositType]}}</view>
					<view class="bcit_box bb_dcyx" v-if="car.reverseImageType===0">倒车影像</view>
				</view>
			</view>
		</view>
		</block>
		<block v-else>
			<NoData/>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h:uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				lbList:[],//https://i.ringzle.com/file/20231128/f0c66f99994d45ba8f40b3350488662b.png
				categaryCfg:{0:'自动挡',1:'手动挡'},
				// driversTypeCfg:{1:'C1驾照',2:'B2驾照',3:'A2驾照',4:'A1驾照'},
				driversTypeCfg: {
					1: 'C1驾照',
					2: 'C2驾照',
					3: 'B2驾照',
					4: 'A1驾照',
					5: 'A2驾照'
				},
				depositTypeCfg:{0:'芝麻免押金',1:'押金￥500',2:'押金￥1000',3:'押金￥1500',4:'押金￥2000'},
				list:[]
			}
		},
		onLoad() {
			this.getList();
			this.getLbList();
		},
		onPullDownRefresh() {
			this.getList();
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},1000)
		},
		methods: {
			getLbList(){
				this.$api.get('/sys/isappletpic/queryBannerByType/8').then(res=>{
					if(res.data.code===0){
						if(res.data.data.bannerList.length>0){
							res.data.data.bannerList.forEach(p=>{
								this.lbList = [...this.lbList,p.path];
							})
						}
					}
				})
			},
			getList(){
				this.$api.get('/travel/travel/rentalcarengagecar/rentalcarengagecar').then(res=>{
					if(res.data.code===0){
						this.list = res.data.data;
					}else this.$showModal(res.data.msg);
				})
			},
			toTurn(item){
				uni.navigateTo({
					url:'/pagesIndex/rentalCar/storeInfo?companyId='+item.rentalcarCompanyId+"&carType="+item.carType+"&name="+item.name+"&numberplate="+item.numberplate+"&type=3"//3 包车
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		padding-bottom: 20rpx;
		
		.bg{
			width: 100%;
			height: 240rpx;
		}
		
		.car_item{
			width: calc(100% - 48rpx);
			margin: 20rpx 24rpx 0;
			padding: 24rpx 24rpx 8rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			background: #fff;
			display: flex;
			&>image{
				width: 162rpx;
				height: 162rpx;
			}
			.bc_info{
				width: calc(100% - 162rpx);
				padding-left: 24rpx;
				box-sizing: border-box;
				.bci_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.bcit_name{
						font-size: 32rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}
					.bcit_bj{
						display: flex;
						align-items: center;
						text{
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #5A607C;
						}
						image{
							width: 24rpx;
							height: 24rpx;
						}
					}
				}
				.bci_pzs{
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					&>view{
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #35465B;
						padding: 0 10rpx;
						position: relative;
						&:first-child{
							padding-left: 0;
						}
						&::after{
							content: "";
							width: 1rpx;
							height: 80%;
							background: #999999;
							position: absolute;
							right: 0;
							top: 10%;
						}
						&:last-child::after{
							width: 0;
						}
					}
				}
				.bci_price{
					margin-top: 30rpx;
					text{
						font-size: 40rpx;
						font-family: DINAlternate, DINAlternate;
						font-weight: bold;
						color: #FD3939;
					}
					span{
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FF4141;
					}
				}
				.bci_tips{
					margin-top: 26rpx;
					overflow: hidden;
					&>image{
						width: 112rpx;
						height: 32rpx;
						margin-right: 10rpx;
						float: left;
					}
					.bcit_box{
						height: 32rpx;
						padding: 0 8rpx;
						border-radius: 4rpx;
						border: 1rpx solid #DCC7AB;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #C9A771;
						float: left;
						margin-right: 9rpx;
						margin-bottom: 16rpx;
						&.bb_dcyx{
							margin-right: 0;
						}
					}
				}
			}
		}
	}
	/deep/.u-swiper__wrapper__item__wrapper__image{
		height: 320rpx !important;
	}
</style>